﻿<div class="row">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Home Cinema Movies</h4>
            <div class="input-group">
                <input id="inputSearchMovies" type="search" ng-model="filterMovies" class="form-control shortInputSearch" placeholder="Filter, search movies..">
                <div class="input-group-btn">
                    <button class="btn btn-primary" ng-click="search();"><i class="glyphicon glyphicon-search"></i></button>
                    <button class="btn btn-primary" ng-click="clearSearch();"><i class="glyphicon glyphicon-remove-sign"></i></button>
                </div>
            </div>
        </div>

        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="movie in Movies | filter:filterMovies">
                    <div class="media">
                        <a class="pull-left" ng-href="#/movies/{{movie.ID}}" title="View {{movie.Title}} details">
                            <img class="media-object" height="120" ng-src="../../Content/images/movies/{{movie.Image}}" alt="" />
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">{{movie.Title}}</h4>
                            Director: <strong>{{movie.Director}}</strong>
                            <br />
                            Writer: <strong>{{movie.Writer}}</strong>
                            <br />
                            Producer: <strong>{{movie.Producer}}</strong>
                            <br />
                            <a class="fancybox-media" ng-href="{{movie.TrailerURI}}">Trailer<i class="fa fa-video-camera fa-fw"></i></a>
                        </div>
                        <div class="media-bottom">
                            <span component-rating="{{movie.Rating}}"></span>
                        </div>
                        <label class="label label-info">{{movie.Genre}}</label>
                        <available-movie is-available="{{movie.IsAvailable}}"></available-movie>
                    </div>
                    <br /><br />
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <div class="text-center">
                <custom-pager page="{{page}}" custom-path="{{customPath}}" pages-count="{{pagesCount}}" total-count="{{totalCount}}" search-func="search(page)"></custom-pager>
            </div>
        </div>
    </div>
</div>